<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500px" height="200px"></canvas>
    <script>
        let c = document.all.canvas.getContext('2d');
        const img = new Image();
        img.src = 'clock.png';
        let x, y;
        const angle = 360 / 60; //每秒的角度
        const minuteAngle = angle / 60; //分钟的角度
        const hourAngle = angle * 5 / 60;  //小时的角度

        img.onload = () => {
            x = img.width / 2;
            y = img.height / 2;
            draw();
        }
        function draw() {
            c.save();
            c.clearRect(0, 0, 200, 200);
            c.fillStyle = '#000';
            c.drawImage(img, 0, 0);
            c.translate(x, y);
            c.arc(0, 0, 5, 0, 10);

            //计算时间
            const date = new Date();
            let hour = date.getHours();
            hour -= hour > 12 ? 12 : 0;
            const minute = date.getMinutes();
            const second = date.getSeconds();
            // 秒针
            let r = (angle * second - 90 + 0.3) * Math.PI / 180;
            c.rotate(r);
            c.fillRect(-10, -0.5, img.width / 2 - 10, 1);
            c.fill();
            // 分针
            c.rotate(-r);   //回归
            r = (angle * minute + minuteAngle * second - 90) * Math.PI / 180;
            c.rotate(r);
            c.fillRect(0, -1, img.width / 2 - 15, 2);
            c.fill();
            // 小时
            c.rotate(-r);   //回归
            r = (angle * hour * 5 + hourAngle * minute - 90 + 0.5) * Math.PI / 180;
            c.rotate(r);
            c.fillRect(0, -1, img.width / 2 - 30, 2);
            c.fill();

            c.restore();
            requestAnimationFrame(draw);
        }
    </script>
</body>

</html>